<template>
  <div class="app-container bg-white">
    <!-- 页面头部 -->
    <div class="page-header flex align-center space-between">
      <div class="font-weight--lg font-size--lg">价格类型</div>
      <div>
        <el-button size="mini" @click="isShowModel = true">新建模板</el-button>
        <el-button size="mini" type="danger">批量删除</el-button>
      </div>
    </div>
    <!-- 页面内容 -->
    <div class="page-body">
      <el-table :data="pageData" stripe :header-cell-style="tableHeaderStyle" v-loading="loading">
        <el-table-column type="selection" width="42"></el-table-column>
        <el-table-column prop="status" label="价格类型名称"></el-table-column>
        <el-table-column prop="name" label="创建人"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="status" label="启用/禁用">
          <template slot-scope="scope">
            <el-switch @change="changeBrandStatus(scope.row, scope.$index)" :value="scope.row.statusBoolean"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="addOrEditOption(2, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteOption(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 页面页脚 -->
    <div class="text-center">
      <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes"
        :page-size="pageSize" :layout="paginationLayout" :total="pageCount">
      </el-pagination>
    </div>

    <price-form :visible.sync="isShowModel" :title="title"></price-form>
  </div>
</template>

<script>
import Setting from '@/settings';
import PriceForm from '@/views/store-management/components/priceTypeForm';
import { GetStoreBrandListByParams, SaveStoreBrandItem, UpdateStoreBrandItem, RemoveStoreBrandItem, ChangeStoreBrandItemStatus } from '@/views/store-management/services/index';

export default {
  components: {
    PriceForm
  },
  data() {
    return {
      queryName: '',
      pageIndex: 1,
      pageSize: Setting.defaultTablePaginationSize,
      pageSizes: Setting.tablePaginationSizes,
      tableHeaderStyle: Setting.tableHeaderStyle,
      paginationLayout: Setting.tablePaginationLayout,
      pageData: [],
      pageCount: 0,
      loading: false,
      isShowModel: false,
      isEditMode: false,
      imgBaseUrl: `${process.env.VUE_APP_FILE_URL}/`
    }
  },
  computed: {
    title() {
      if (!this.isEditMode) {
        return '新建价格类型';
      } else {
        return '编辑价格类型';
      }
    }
  },
  created() {
    this.getPageDataList();
  },
  methods: {
    // 新增和编辑按钮
    addOrEditOption(type, row) {
      this.$prompt('请输入品牌名称', (type == 1 ? '新建' : '编辑') + '品牌', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '最多输入10个字符',
        inputPattern: /^.{1,10}$/,
        inputErrorMessage: '最多输入10个字符',
        inputValue: (type == 1 ? null : row.name),
        closeOnClickModal: false,
        beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              if (type == 1) {
                SaveStoreBrandItem({
                  name: instance.inputValue,
                  // 用户ID之后需要修改
                  creatorId: JSON.parse(this.$store.getters.userInfo).id ? JSON.parse(this.$store.getters.userInfo).id : '1'
                })
                .then(data => {
                  instance.confirmButtonLoading = false;
                  if (data.code == 200) {
                    this.$message.success('新增成功!');
                    done();
                    this.getPageDataList();
                  } else {
                    this.$message.success('新增失败!');
                  }
                })
                .catch(() => {
                  instance.confirmButtonLoading = false;
                })
              } else {
                UpdateStoreBrandItem({
                  id: row.id,
                  name: instance.inputValue
                })
                .then(data => {
                  instance.confirmButtonLoading = false;
                  if (data.code == 200) {
                    this.$message.success('修改成功!');
                    done();
                    this.getPageDataList();
                  } else {
                    this.$message.success('修改失败!');
                  }
                })
                .catch(() => {
                  instance.confirmButtonLoading = false;
                })
              }
            } else {
              done();
            }
          }
      })
    },
  
    // 修改品牌上下架状态
    changeBrandStatus(row, index) {
      row.status = Number(row.status) == 0 ? 1 : 0;
    //   ChangeStoreBrandItemStatus({
    //     id: row.id,
    //     status: row.status
    //   })
    //   .then(data => {
    //     if (data.code == 200) {
    //       // this.$set(this.pageData, index, row);
    //       this.$message.success('修改成功!');
    //       row.statusBoolean = !row.statusBoolean;
    //     } else {
    //       this.$message({
    //         type: 'error',
    //         message: '修改失败!'
    //       });
    //     }
    //   })
    //   .catch(error => {
    //     this.$message({
    //       type: 'error',
    //       message: '修改失败!'
    //     });
    //   })
    },

    // 删除操作
    deleteOption(rowId) {
      this.$confirm('此操作将永久删除该品牌, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = '加载中...';
            // RemoveStoreBrandItem({ id: rowId })
            // .then(data => {
            //   instance.confirmButtonLoading = false;
            //   if (data.code == 200) {
            //     done();
            //     this.$message.success('删除成功!');
            //     this.getPageDataList();
            //   } else {
            //     this.$message.error('删除失败!');
            //   }
            // })
            // .catch(error => {
              instance.confirmButtonLoading = false;
            // })
            done();
          } else {
            done();
          }
        }
      })
    },

    // 重置操作
    resetOption() {
      this.queryName = '';
      this.pageIndex = 1;
      this.getPageDataList();
    },

    // 获取页面列表数据
    getPageDataList() {
      this.loading = true;
      GetStoreBrandListByParams({
        search: this.queryName,
        pageSize: this.pageSize,
        pageNum: this.pageIndex
      })
      .then(data => {
        if (data.code == 200) {
          this.pageData = data.data.list.map(item => {
            item.statusBoolean = !!item.status;
            return item;
          });
          this.pageCount = data.data.total;
        }
        setTimeout(() => {
          this.loading = false;
        }, 300);
      })
      .catch(error => {
        this.loading = false;
      })
    },
    // 分页列表改变
    handlePagingChange(event) {
      this.pageIndex = event;
      this.getPageDataList();
    },
    handleSizeChange(event) {
      this.pageIndex = 1;
      this.pageSize = event;
      this.getPageDataList();
    }
  }
}
</script>
